<template>
    <div class="tipContainer">
        <div class="tipsBox" v-for="(item,index) in TipsData" :key="index">
            <ul v-if="index < 2">
                <h3 style="margin-bottom: 20px">{{item.examname}}</h3>
                <p style="margin-bottom: 3px">{{item.examaddr}}</p>
                <p style="margin-bottom: 3px">{{item.examtimefrom}}</p>
                <p>{{item.examtimeto}}</p>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            TipsData: []
        }
    },
    // prop少了一个s但不报错是真的难顶
    props: {
        tipsData: Array
    },
    mounted() {
        this.$http
            .get('exam/list')
            .then(Response =>(this.TipsData = Response.data))
            .catch(function (error){
                console.log(error)
            })
            .then(function (){
                console.log("请求考试数据成功")
            })
    }
}
</script>

<style>
.tipsContainer {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-content: center;
}
.tipsBox {
    width: 30%;
    height: 33%;
    text-align: center;
    float: left;
    border:1px solid grey;
    margin: 2px
}
</style>